<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="formRef"
					:inline="true"
					:model="queryData"
					label-width="auto"
				>
					<el-form-item :label="$t('common.belong_merchant') + ':'">
						<merchant-select
							v-model="queryData.merchantId"
							:merchantInfo.sync="merchantObj"
						></merchant-select>
					</el-form-item>
					<el-form-item :label="$t('report.commission_month') + ':'">
						<el-date-picker
							v-model="searchTime"
							type="monthrange"
							range-separator="-"
							:start-placeholder="$t('report.start_date')"
							:end-placeholder="$t('report.end_date')"
						></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('common.agent_number') + ':'">
						<el-input
							v-model.trim="queryData.proxyCaption"
							clearable
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('702071')"
							type="warning"
							icon="el-icon-download"
							size="medium"
							@click="handleExportExcel"
						>
							{{ $t('common.export') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					key="father"
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					show-summary
					:summary-method="
						(val) => handleRow(val, subSummary, totalSummary)
					"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						fixed
						prop="proxyAccount"
						align="center"
						:label="$t('common.agent_number')"
					>
						<template slot="header">
							{{ $t('common.agent_number') }}
							<br />
							{{ $t('report.agency_level') }}
						</template>
						<template slot-scope="scope">
							{{ scope.row.proxyAccount }}
							<br />
							{{ scope.row.proxyLevelCaption }}
						</template>
					</el-table-column>
					<el-table-column
						fixed
						prop="parentProxyName"
						align="center"
						:label="$t('common.direct_superior')"
					>
						<template slot="header">
							{{ $t('common.direct_superior') }}
							<br />
							{{ $t('report.general_account') }}
						</template>
						<template slot-scope="scope">
							{{ scope.row.parentProxyName || '-' }}
							<br />
							{{ scope.row.topProxyName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="merchantName"
						align="center"
						:label="$t('common.belong_merchant')"
					>
						<template slot="header">
							{{ $t('common.belong_merchant') }}
							<br />
							{{ $t('report.main_merchant') }}
						</template>
						<template slot-scope="scope">
							{{ scope.row.merchantName }}
							<br />
							{{ scope.row.topMerchantName }}
						</template>
					</el-table-column>
					<el-table-column
						prop="accountStatus"
						align="center"
						:label="$t('common.account_status')"
					>
						<template slot-scope="scope">
							<span
								v-if="scope.row.loginLockStatus === 1"
								class="disableRgba"
							>
								{{ $t('report.login_lock') }}
							</span>
							<span
								v-if="scope.row.accountLockStatus === 1"
								class="deleteRgba"
							>
								{{ $t('report.account_lock') }}
							</span>
							<span
								v-if="
									scope.row.loginLockStatus === 0 &&
										scope.row.accountLockStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('report.normal') }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="payment"
						align="center"
						:label="$t('report.payment')"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.payment
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="realPCommission"
						align="center"
						:label="$t('report.realp_commission')"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.realPCommission
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="notPayAmount"
						align="center"
						:label="$t('report.not_pay_amount')"
					>
						<template slot-scope="scope">
							<el-link
								v-if="scope.row.notPayAmount !== 0"
								class="underline"
								type="danger"
								@click="dialogData(true, scope.row)"
							>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.notPayAmount
									)
								}}
							</el-link>
							<span v-else>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.notPayAmount
									)
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="paymentCommission"
						align="center"
						:label="$t('report.payment_commission')"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.paymentCommission
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="realRCommission"
						align="center"
						:label="$t('report.realr_commission')"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.realRCommission
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="totalChildCommissionAmount"
						align="center"
						:label="$t('report.total_child_commission_amount')"
					>
						<template slot-scope="scope">
							<el-link
								v-if="
									scope.row.totalChildCommissionAmount !== 0
								"
								class="underline"
								type="danger"
								@click="dialogData(false, scope.row)"
							>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.totalChildCommissionAmount
									)
								}}
							</el-link>
							<span v-else>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.totalChildCommissionAmount
									)
								}}
							</span>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					class="pageValue"
					:current-page.sync="pageNum"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size.sync="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
		</div>
		<detail-page
			v-if="showDialog"
			:rowVal="rowVal"
			:closeDialog="
				(val) => {
					showDialog = val
				}
			"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
const end = () => dayjs()
	.subtract(1, 'month')
	.endOf('month')
export default {
	name: routerNames.commissionReceiptRaymentReport,
	components: {
		DetailPage: () => import('./components/detail-page.vue')
	},
	mixins: [list, summaryList],
	data() {
		return {
			queryData: {},
			searchTime: ['2022-08', end()],
			tableData: [],
			subSummary: {},
			totalSummary: {},
			showDialog: false,
			rowVal: {},
			merchantObj: ''
		}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		loadData() {
			this.loading = true
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				startMonth: dayjs(timeArr[0]).format('YYYYMM'),
				endMonth: dayjs(timeArr[1]).format('YYYYMM'),
				...this.getParams()
			}
			this.tableData = []
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getReportProxyCommissionCommissionList(params)
				.then((res) => {
					this.loading = false
					this.tableData = res?.data?.record || []
					this.total = res?.data?.totalRecord || 0
					this.subSummary = res?.data?.summary || {}
					this.getSpanArr(this.tableData)
				})
				.catch(() => {
					this.loading = false
				})
			this.$api
				.getReportProxyCommissionCommissionTotal(params)
				.then((res) => {
					this.loading = false
					this.totalSummary = res?.data || {}
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		dialogData(flag, val) {
			const timeArr = this.searchTime || []
			this.rowVal = {
				flag: flag,
				currency: val.currency,
				proxyId: val.proxyId,
				proxyAccount: val.proxyAccount,
				startMonth: dayjs(timeArr[0]).format('YYYYMM'),
				endMonth: dayjs(timeArr[1]).format('YYYYMM')
			}
			this.showDialog = true
		},
		reset() {
			this.pageNum = 1
			this.queryData = {}
			this.merchantObj = ''
			this.searchTime = ['2022-08', end()]
			this.loadData()
		},
		handleExportExcel() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				startMonth: dayjs(timeArr[0]).format('YYYYMM'),
				endMonth: dayjs(timeArr[1]).format('YYYYMM')
			}
			this.exportExcel(params)
		}
	}
}
</script>

<style lang="scss" scoped>
.underline {
	text-decoration: underline;
}
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
